import React, { Component } from 'react';
import {connect} from 'react-redux';
import {AtIcon, AtDrawer} from 'taro-ui';
import Skeleton from 'taro-skeleton'
import Taro from '@tarojs/taro';
import {View, Swiper, SwiperItem, Image, Block, Video, Navigator} from '@tarojs/components';
import {http} from '../../utils/http'
import {
  Banner,
  Good,
  CityLocation as CityLocationType,
  PlatformSet,
  IndexCustom,
  CityLabelsItem,
  SubscriptionType
} from '../../utils/server.interface'
import SiteLocation from '../../components/site-location/site-location'
import CityLocation from '../../components/city-location/city-location'
import SwiperRecommend from '../../components/swiper-recommend/swiper-recommend'
import SwiperMovie from '../../components/swiper-movie/swiper-movie'
import SmallGoodsBox from '../../components/small-goods-box/small-goods-box'
import BigGoodsBox from '../../components/big-goods-box/big-goods-box'
import GzhAuth from '../../components/gzh-auth/gzh-auth'
import {
  INDEX_CUSTOM,
  MODULE_MAINV2,
  CITY_LABELS,
  TARO_ENV,
  LIAN_INDEX_PRODUCT_LIST,
  IDENTITY_IS_SELLER,
  QUERY_PRODUCT_LIST,
  ALI_GET_LOCATION_LIST
} from '../../constants/api'
import fetchNewGoodsList from "../../utils/fetchNewGoodsList";
import {platform} from '../../utils/platform-settting.service'
import {
  gotoPage,
  getHeadTop,
  vcmonitor,
  GetRequest,
  clearSearch,
  setStorageSync,
  getStorageSync
} from '../../utils/tools'
import FloatRedbag from '../../components/float-redbag/float-redbag'
import Curtain from '../../components/curtain/curtain';
import MainMenu from '../../components/main-menu/main-menu'
import MainLabel from '../../components/main-label/main-label'
import IndexSaleLimit1 from '../../components/index-sale/index-sale-limit-1'
import LocalLife from '../../components/index-sale/locallife'
import LocalLifeAli from '../../components/index-sale/locallifeali'
import IndexSaleLimit2 from '../../components/index-sale/index-sale-limit-2'
import IndexSaleMost from '../../components/index-sale/index-sale-most'
import IndexSaleCommon from '../../components/index-sale/index-sale-common'
import IndexSaleLimit3 from '../../components/index-sale/index-sale-limit-3';
import CustomTabBar from '../../components/tabBar/tab-bar';
import {getRedBagSet} from '../../actions/redbag';
import {location as localtionServer} from '../../utils/location.service';
import CityLabels from '../../components/city-labels/city-labels'
import SupportBar from '../../components/support-bar/support-bar'
import IndexVideo from '../../components/detail-header/index-video'
import Subscription from "../../components/subscription";
import {newHttp} from "../../utils/request";
import ShangxinToday from "./template/shangxinToday";
import Seckill from "./template/seckill";
import SeckillActive from "./template/seckillActive";
import Recommendation from "./template/recommendation";
import RegionalCategory from "./template/regionalCategory";
import Advertisement from '../../components/advertisement/advertisement'
import Share from '../../components/share/share'
import {lxH5Wx} from "../../utils/lx.h5.service";
import {getPoster} from "../../utils/poster.service";
import {
  getSiteMode,
  getSiteList,
  getMenuButtonBoundingClientRect,
  getBanner,
  getIndexDiy
} from "../../utils/getCommonData";
import {handlerIndexH5Share, handlerIndexPublicCode} from "../../utils/handlerPublicCode";
import './index.scss';

const NOT_LX_H5 = process.env.P_ENV === 'lx' && TARO_ENV !== "h5";

interface IndexType {
  linkUri: any
  opacityNum: any
  banners: Banner[]
  show: boolean
  siteList: any
  isShow: any
  search: any
  indexGoods: Good[]
  loadMoreStatus: "more" | "loading" | "noMore"
  platformSet?: PlatformSet
  custom: IndexCustom | false
  curtainShow: boolean
  indexDiy: any
  bannerVideo: string
  headTop: { statusBar: number; top: number }
  showLoading: boolean
  systemInfo: any
  menuInfo: any
  bannerHeight: number
  cityLabels: CityLabelsItem[]
  video: string
  playSta: boolean
  isUser: boolean
  autoPlay: boolean
  openMp: SubscriptionType | false
  tabBarInfo: any
  mpUserInfo: any
  lianList: any
  aliList: any
  multiSite: any
}

type PageStateProps = {
  location: CityLocationType
  member
}

type PageDispatchProps = {
  onSetRedBag
}

type IProps = PageStateProps & PageDispatchProps

interface Index {
  props: IProps
}

@connect(({location}) => ({
  location
}), (dispatch) => ({
  onSetRedBag() {
    dispatch(getRedBagSet())
  }
}))

class Index extends Component {
  state: IndexType = {
    linkUri: '',
    tabBarInfo: false,
    isShow: false,
    opacityNum: 0,
    multiSite: 0,
    banners: [],
    siteList: [],
    search: {},
    indexGoods: [],
    loadMoreStatus: 'more',
    custom: false,
    curtainShow: true,
    indexDiy: {module: [], guessLike: 0, guessLikeName: '猜你喜欢', menus: [], labels: []},
    headTop: {statusBar: 0, top: 12},
    showLoading: true,
    systemInfo: {},
    menuInfo: {},
    bannerHeight: 375,
    cityLabels: [],
    bannerVideo: '',
    video: '',
    playSta: false,
    openMp: false,
    show: false,
    autoPlay: true,
    isUser: true,
    mpUserInfo: '',
    lianList: [],
    aliList: [],
  }

  async UNSAFE_componentWillMount() {
    let sKey = getStorageSync('sKey')
    let siteList
    const multiSite = await getSiteMode()
    if (multiSite) {
      siteList = await getSiteList()
      const storageSKey = getStorageSync('sKey')
      const query: any = this.instance.router.params
      if (query.skey) {
        sKey = query.skey
      } else if (storageSKey) {
        sKey = storageSKey
      }
      if (!sKey) {
        sKey = siteList[0] && siteList[0].uuid
        setStorageSync('sKey', sKey)
        if (TARO_ENV === 'h5') {
          await Taro.showLoading({title: '加载中...'})
          return window.location.reload()
        }
      } else {
        setStorageSync('sKey', sKey)
      }
      this.setState({siteList, multiSite})
    }
    const platformSet: any = await platform.getPlatFormSet()
    platform.info = platformSet
    await this.initData()
    if (getStorageSync('user') && process.env.IS_SHOW_RED_BAG) {
      this.props.onSetRedBag()
    }
    const systemInfo = Taro.getSystemInfoSync()
    const menuInfo = getMenuButtonBoundingClientRect()
    this.setState({platformSet, systemInfo, menuInfo, mpUserInfo: getStorageSync('mpUserInfo')})
    if (process.env.P_ENV !== 'lx') {
      await localtionServer.autoLocation()
    }
    const city = getStorageSync('city')
    if (process.env.TARO_ENV !== 'tt' && city && platformSet.is_open_united) {
      const lianList = (await newHttp.catchGet(LIAN_INDEX_PRODUCT_LIST, {city: city.area_name.replace('市', '')})) || []
      this.setState({lianList})
    }
    if (process.env.TARO_ENV !== 'tt' && platformSet.is_open_aliyun) {
      let cityId = ''
      if (Taro.getStorageSync('aliCity')) {
        cityId = Taro.getStorageSync('aliCity').region_id
      } else if (Taro.getStorageSync('city')) {
        const searchCity = await newHttp.catchGet(ALI_GET_LOCATION_LIST, {cityName: Taro.getStorageSync('city').area_name.replace('市', '')})
        if (searchCity && searchCity.length > 0) {
          cityId = searchCity[0].filterKey
        }
      } else if (this.props.location.area_name != '全国') {
        const searchCity = await newHttp.catchGet(ALI_GET_LOCATION_LIST, {cityName: this.props.location.area_name.replace('市', '')})
        if (searchCity && searchCity.length > 0) {
          cityId = searchCity[0].filterKey
        }
      } else {
        cityId = '110100'
      }
      const aliList = (await newHttp.catchGet(QUERY_PRODUCT_LIST, {cityId: cityId})) || []
      this.setState({aliList})
    }
    if (platform.subscription && platform.subscription.show_place.indexOf("1") > -1) {
      this.setState({
        openMp: platform.subscription
      })
    }
  }

  updateTabBar() {
    const pageObj = this.instance.page
    let tabbar
    if (process.env.TARO_ENV === 'weapp') {
      tabbar = Taro.getTabBar(pageObj)
    }
    platform.getIndexNavigation().then(res => {
      if (res) {
        const tabBarInfo = JSON.parse(res)
        const pagePath = pageObj.route
        if (process.env.TARO_ENV === 'weapp') {
          tabbar.setState({ tabBarInfo, pagePath, isBigIndexPage: false })
        } else {
          this.setState({ tabBarInfo })
        }
      }
    })
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore' && (this.state.indexDiy.guessLike > -1 || this.state.indexDiy.regionFlag == true)) {
      this.setState({loadMoreStatus: "loading"})
      const old = this.state.indexGoods
      const indexGoods = (await this.getIndexGoods(++this.page)) || []
      this.setState({indexGoods: [...old, ...indexGoods]})
    }
  }

  async setSKey(uuid) {
    const {siteList} = this.state
    let site: any
    for (const _i in siteList) {
      let _site
      if (siteList.hasOwnProperty(_i)) {
        _site = siteList[_i]
      }
      const _uuid = _site.uuid;
      if (uuid === _uuid) {
        site = _site;
      }
    }
    const sKey = site.uuid;
    const extConfig = getStorageSync('user')
    if (extConfig) {
      extConfig.mpkey = site.mpkey
      setStorageSync('user', extConfig)
    }
    setStorageSync('sKey', sKey)
    if (TARO_ENV === 'h5') {
      return window.location.replace(site.domains + '?mpkey=' + site.mpkey)
    } else {
      await Taro.showLoading({title: '加载中...', mask: true})
      this.upLoad()
      const platformSet: any = await platform.getPlatFormSet()
      platform.info = platformSet
      Taro.setNavigationBarTitle({ title: platformSet.platformName })
      this.setState({
        platformSet,
        siteList,
        show: false,
        linkUri: '/pages/index/index?sKey=' + sKey + `&${this.shareParam}`
      })
      this.updateTabBar()
      Taro.hideLoading()
    }
  }

  scroll() {
    const query = Taro.createSelectorQuery();
    query.selectViewport().scrollOffset();
    query.select('#scroll').boundingClientRect();
    query.exec(res => {
      if (TARO_ENV === 'h5') {
        const scroll: any = document.getElementById('scroll')
        Taro.pageScrollTo({
          duration: 50,
          scrollTop: scroll.offsetTop - 100
        })
      } else {
        Taro.pageScrollTo({
          duration: 50,
          scrollTop: res[0].scrollTop + res[1].top - (TARO_ENV === 'tt' ? -12 : 109)
        })
      }
    })
  }

  ReachBottom(search) {
    Taro.showLoading({title: '加载中...'})
    this.page = 0;
    this.setState({
      search,
      loadMoreStatus: "loading"
    }, async () => {
      try {
        const indexGoods = (await this.getIndexGoods(1)) || []
        this.setState({
          indexGoods
        });
        this.scroll();
        Taro.hideLoading()
      } catch (e) {
        Taro.hideLoading()
      }
    });
  }

  page = 1
  shareParam = ''
  instance: any = Taro.getCurrentInstance()

  async onPullDownRefresh() {
    this.page = 1
    await this.initData()
    Taro.stopPullDownRefresh()
  }

  async componentDidShow() {
    await vcmonitor(this)
    clearSearch()
    const isH5 = TARO_ENV === 'h5'
    this.updateTabBar()
    const platformSet = await platform.info
    const title = platformSet.platformName
    const {scene, tempSellerId = '', bindSellerId} = this.instance.router.params
    this.shareParam = await handlerIndexPublicCode(platformSet, scene, tempSellerId, bindSellerId)
    if (isH5) {
      this.setState({linkUri: await handlerIndexH5Share(title, '首页', '/pages/index/index', platformSet.platformLogo, this.shareParam)})
      const video = document.getElementById('video-h5')
      if (video) {
        video.style.cssText = `height: ${video.clientHeight}px;`
      }
    } else {
      this.setState({linkUri: '/pages/index/index?sKey=' + (getStorageSync('sKey') || '') + `&${this.shareParam}`})
    }
    if (platformSet && title) {
      await Taro.setNavigationBarTitle({
        title
      })
    }
    if (platformSet.is_open_aliyun && (Taro.getStorageSync('aliCity') || Taro.getStorageSync('city'))) {
      let cityId = ''
      if (Taro.getStorageSync('aliCity')) {
        cityId = Taro.getStorageSync('aliCity').region_id
      } else if (Taro.getStorageSync('city')) {
        const searchCity = await newHttp.catchGet(ALI_GET_LOCATION_LIST, {cityName: Taro.getStorageSync('city').area_name.replace('市', '')})
        if (searchCity && searchCity.length > 0) {
          cityId = searchCity[0].filterKey
        }
      }
      const aliList = (await newHttp.catchGet(QUERY_PRODUCT_LIST, {cityId: cityId})) || []
      this.setState({aliList})
    }
    await this.cateData()
  }

  async initData() {
    if (process.env.P_ENV !== 'lx') {
      localtionServer.getLocation().then(async (res: any) => {
        if (res) {
          setStorageSync('locationData', res);
        }
      })
    }
    const headTop = getHeadTop() || this.state.headTop
    const platformSet = platform.info
    this.setState({platformSet, headTop})
    const {bannerVideo} = this.state
    if (this.state.indexDiy.module) {
      this.state.indexDiy.module = []
      this.setState({indexDiy: this.state.indexDiy})
    }
    const indexDiy: any = await getIndexDiy({style: 0})
    const moduleMainData = await http.HGet(MODULE_MAINV2 + '?areaId=' + this.props.location.region_id, {})
    if (moduleMainData && moduleMainData.data) {
      const moduleMain = moduleMainData.data
      if (moduleMain) {
        indexDiy.guessLike = moduleMain.guessLike
        indexDiy.regionFlag = moduleMain.regionFlag
        if (moduleMain.regionalCategoryModel) {
          indexDiy.regionalCategoryModel = moduleMain.regionalCategoryModel
          indexDiy.regionalCategoryModel.category_region_region.unshift({
            name: '全部',
            id: ''
          });
          indexDiy.quantity = moduleMain.regionalCategoryModel.quantity;
        }
        indexDiy.guessLikeName = moduleMain.guessLikeName
        indexDiy.module = moduleMain.module
      }
    }
    if (indexDiy) {
      const video = indexDiy.banner_style
      let banners: any = []
      if (!video) {
        banners = await getBanner({style: 0})
        if (banners && banners.length > 0) {
          try {
            await Taro.getImageInfo({
              src: banners[0].img,
              success: (res) => {
                if (TARO_ENV === 'h5') {
                  const b = document.body.clientWidth / res.width
                  this.setState({bannerHeight: res.height * b})
                } else {
                  this.setState({bannerHeight: res.height <= 200 ? res.height + res.height / 2 : res.height})
                }
              }
            })
          } catch (e) {
          }
        }
      } else {
        if (bannerVideo != indexDiy.banner_video) {
          this.setState({bannerVideo: indexDiy.banner_video})
        }
      }
      this.setState({indexDiy, banners, video, showLoading: false}, () => {
        if (TARO_ENV === 'h5') {
          const videoEle: any = document.getElementById('video-h5')
          if (videoEle) {
            videoEle.style.cssText = `height: ${videoEle.clientHeight}px;width:100%;`
          }
        }
        const query = Taro.createSelectorQuery();
        query.select('#videoBox').boundingClientRect();
        query.exec(res => {
          if (res[0]) {
            const {top, height} = res[0]
            if (top + height / 2 < this.state.systemInfo.windowHeight && (top + height / 2 > 0)) {
              this.setState({autoPlay: true})
              this.onPlay(true)
            } else {
              this.setState({autoPlay: false})
              this.onPlay(false)
            }
          }
        })
      })
    }
    // 商品列表
    const indexGoods = await fetchNewGoodsList.getGoodsList({
      module_type: "4",
      page: this.page,
      length: 10,
      region_region: "",
      region_category: ""
    });
    const custom = await http.get<IndexCustom>(INDEX_CUSTOM, {})
    this.setState({indexGoods, custom})
  }

  async cateData() {
    const cityLabels = (await http.get<CityLabelsItem[]>(CITY_LABELS + '/' + (this.props.location.region_id || 0), {})) || []
    let isUser = true
    if (process.env.DISTINGUISH_IDENTITY) {
      const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
      isUser = !identityIsSeller.isSeller
    }
    this.setState({
      cityLabels,
      isUser
    })
  }

  async getIndexGoods(page = 1) {
    if (page > 1) {
      Taro.showLoading({title: '加载中...'})
    }
    try {
      const search = this.state.search || {};
      const sortObj = {0: 1, 1: 4, 2: 2, 3: 0, 4: 3};
      // 商品列表
      let indexGoods = {};
      const result = await fetchNewGoodsList.getGoodsList({
        module_type: "4",
        page: this.page,
        length: 10,
        region_region: search.region_region || "",
        region_category: search.region_category || "",
        order_rule: search.region_sort ? sortObj[search.region_sort] : "",
        order_by: "desc",
        trade_area_lng: search.longitude || "",
        trade_area_lat: search.latitude || "",
        label: search.label || ""
      });

      if (result && Object.keys(result).length === 0) {
        indexGoods = Object.assign({}, {list: []});
      } else {
        indexGoods = Object.assign({}, {
          list: result.map(item => ({
            ...item,
            commission_price: item.commission || "",
            salesVolume: item.sales_volume,
          }))
        });
      }
      Taro.hideLoading()
      if (indexGoods) {
        if (indexGoods.list.length < 10) {
          this.setState({loadMoreStatus: 'noMore'})
        } else {
          this.setState({loadMoreStatus: 'more'})
        }
        return indexGoods.list
      } else {
        this.setState({loadMoreStatus: 'more'})
        return []
      }
    } catch (e) {
      Taro.hideLoading()
    }
  }

  componentDidHide() {
    this.onPlay(false)
  }

  onShareAppMessage() {
    return {
      imgUrl: platform.info.platformLogo,
      title: platform.info.platformName,
      path: '/pages/index/index?' + this.shareParam + `&sKey=${getStorageSync('sKey' || '')}`
    }
  }

  onShareTimeline() {
    return {
      imgUrl: platform.info.platformLogo,
      title: platform.info.platformName,
      query: '?' + this.shareParam + `&sKey=${getStorageSync('sKey' || '')}`
    }
  }

  closeCurtain() {
    this.setState({curtainShow: false})
  }

  menusClick(item) {
    gotoPage(item.link)
  }

  onPlay(playSta) {
    this.setState({playSta: playSta})
  }

  onPageScroll(page) {
    const query1 = Taro.createSelectorQuery();
    query1.select('#scroll').boundingClientRect();
    query1.exec(res => {
      if (this.state.loadMoreStatus !== 'loading') {
        this.setState({isShow: res[0].top < (TARO_ENV === 'tt' ? -10 : 110), opacityNum: Math.min(page.scrollTop / 250, 1)})
      }
    })
    const query = Taro.createSelectorQuery();
    query.select('#videoBox').boundingClientRect();
    query.exec(res => {
      if (page.scrollTop > 150) {
        const {indexDiy} = this.state
        indexDiy.banner_muted = 1
        this.setState({
          indexDiy
        })
      }
      if (res[0]) {
        const {top, height} = res[0]
        if (top + height / 2 < this.state.systemInfo.windowHeight && (top + height / 2 > 0)) {
          this.onPlay(true)
        } else {
          this.onPlay(false)
        }
      }
    })
  }

  upLoad() {
    this.page = 1
    this.initData()
  }

  muted() {
    const {indexDiy} = this.state
    indexDiy.banner_muted = indexDiy.banner_muted == 1 ? 0 : 1
    this.setState({
      indexDiy
    })
  }

  showSite(show = true) {
    this.setState({
      show
    })
  }

  openVideo() {
    const videoElement: any = document.getElementById('video-h5')
    videoElement && videoElement.play()
  }

  async onHandlerShowDialog() {
    try {
      Taro.showLoading({title: '加载中...'})
      const poster = await getPoster('index', '', '') // 获取海报
      if (poster && poster.url) {
        Taro.hideLoading()
        lxH5Wx.setShare(platform.info.platformName, poster.url)
      }
    } catch (e) {
      Taro.hideLoading()
    }
  }

  render() {
    const {
      show,
      menuInfo,
      linkUri,
      opacityNum,
      systemInfo,
      isUser,
      platformSet,
      lianList,
      aliList,
      mpUserInfo,
      banners,
      video,
      indexGoods,
      loadMoreStatus,
      playSta,
      autoPlay,
      custom,
      curtainShow,
      indexDiy,
      headTop,
      showLoading,
      bannerHeight,
      cityLabels,
      openMp,
      bannerVideo,
      isShow,
      multiSite,
      tabBarInfo,
      siteList
    } = this.state
    return (
      <View className='root indexRoot'>
        <GzhAuth />
        {TARO_ENV !== 'weapp' && <View style='position: fixed; width: 100%; z-index: 9999; bottom: 0px; left: 0;'><CustomTabBar pagePath='pages/index/index' isBigIndexPage={false} tabBarInfo={tabBarInfo} /></View>}
        <Skeleton loading={showLoading}
          className='paddingNone'
          title
          titleWidth='100%' rowHeight='258px'
        >
          <Block>
            {(indexDiy && indexDiy.head_type && indexDiy.head_type.banner_search_type == 0 && indexDiy.head_type.type == 1) &&
            <View>
              {(TARO_ENV === 'h5' || TARO_ENV === 'tt') ?
                <Block>
                  {
                    (multiSite == 1) && <SiteLocation
                      style='background: rgba(255, 255, 255, .72);margin: 10px; width: initial;'
                      platformSet={platformSet}
                      onShow={() => this.showSite()}
                    />
                  }
                  {
                    (multiSite == 0) &&
                    <CityLocation style='width: inherit !important;margin: 10px;background: rgba(255, 255, 255, .72);' />
                  }
                  {(TARO_ENV !== 'h5' && TARO_ENV !== 'tt') && <View
                    className={!video ? `search-bar ${TARO_ENV}` : `search-bar ${TARO_ENV} border1`}
                    style={`top: ${headTop.top + headTop.statusBar}px;`}
                  >
                  </View>}
                </Block>
                :
                <Block>
                  <View
                    className={!video ? `search-bar ${TARO_ENV}` : `search-bar ${TARO_ENV} border1`}
                    style={`top: ${headTop.top + headTop.statusBar}px;`}
                  >
                    {
                      multiSite == 1 && <SiteLocation
                        platformSet={platformSet}
                        style='background: rgba(255, 255, 255, .72);'
                        onShow={() => this.showSite()}
                      />
                    }
                    {
                      multiSite == 0 &&
                      <CityLocation style='background: rgba(255, 255, 255, .72);' />
                    }
                  </View>
                </Block>
              }
            </View>
            }
          </Block>
        </Skeleton>
        {/* banner1 */}
        <Skeleton loading={showLoading}
          className='paddingNone'
          title
          titleWidth='100%' rowHeight='258px'
        >
          <Block>
            {(indexDiy.head_type && indexDiy.head_type.type == 1) &&
            <View>
              {!video ?
                <Block>
                  {banners.length > 0 ?
                    <View>
                      {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 1 && multiSite == 1) &&
                      <View
                        className='swiper-diy-site'
                        style={`z-index: 8888;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; position: static;justify-content: inherit;padding: 10px 0 10px 24px' : `top: ${headTop.top + headTop.statusBar + 4}px;position: fixed !important;`}`}
                        onClick={() => this.showSite()}
                      >
                        <View style='z-index: 9999;'>
                          {platformSet.platformName || ''}
                        </View>
                        <View style='z-index: 9999;' className='icon'>
                          <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                        </View>
                      </View>
                      }
                      {(multiSite == 0 && indexDiy.head_type && indexDiy.head_type.banner_search_type == 1) &&
                      <Navigator className='city' url='/other/select-city/select-city' hoverClass='none'>
                        <View
                          className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                          style={`z-index: 8888;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 0;' : `top: ${headTop.top + headTop.statusBar + 4}px;position: fixed !important;`}`}
                        >
                          <View>
                            {this.props.location.area_name}
                          </View>
                          <View className='icon'>
                            <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                          </View>
                        </View>
                      </Navigator>
                      }
                      {TARO_ENV === 'weapp' &&
                      <View className='' style={`height: ${headTop.top + headTop.statusBar + 45}px;`} />}
                      <View className='swiper-diy1'>
                        <View className='swiper-wrap1'>
                          <View className='swiper-box'
                            style={`height: ${bannerHeight + (TARO_ENV === "h5" ? 'px' : 'rpx')};`}
                          >
                            <Swiper
                              indicatorDots
                              autoplay
                              indicatorActiveColor={`${process.env.mainColor}`}
                              indicatorColor='rgba(255,255,255,0.68)' interval={5000} duration={1000}
                              className='swiper'
                            >
                              {banners.map((item, index) => <SwiperItem key={index}
                                onClick={this.menusClick.bind(this, item, index)}
                              >
                                <Image className='imageFix' src={item.img} mode='widthFix' lazyLoad />
                              </SwiperItem>)}
                            </Swiper>
                          </View>
                        </View>
                      </View>
                    </View>
                    :
                    <Block>
                      {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 1 && multiSite == 1) &&
                      <View
                        className='swiper-diy-site'
                        style={`z-index: 8888;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; position: static;justify-content: inherit;padding: 10px 0 10px 24px' : `top: ${headTop.top + headTop.statusBar + 4}px;position: fixed !important;`}`}
                        onClick={() => this.showSite()}
                      >
                        <View style='z-index: 9999;'>
                          {platformSet.platformName || ''}
                        </View>
                        <View style='z-index: 9999;' className='icon'>
                          <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                        </View>
                      </View>
                      }
                      {(multiSite == 0 && indexDiy.head_type && indexDiy.head_type.banner_search_type == 1) &&
                      <Navigator className='city' url='/other/select-city/select-city' hoverClass='none'>
                        <View
                          className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                          style={`z-index: 8888;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 10px;' : `top: ${headTop.top + headTop.statusBar + 4}px;position: fixed !important;`}`}
                        >
                          <View>
                            {this.props.location.area_name}
                          </View>
                          <View className='icon'>
                            <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                          </View>
                        </View>
                      </Navigator>
                      }
                      {TARO_ENV === 'weapp' &&
                      <View className='head-bg-static' style={`height: ${headTop.top + headTop.statusBar + 45}px;`} />}
                    </Block>
                  }
                </Block>
                :
                <Block>
                  {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 1 && multiSite == 1) &&
                  <View
                    className='swiper-diy-site'
                    style={`z-index: 8888;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; position: static;justify-content: inherit;padding: 10px 0 10px 24px' : `top: ${headTop.top + headTop.statusBar + 4}px;position: fixed !important;`}`}
                    onClick={() => this.showSite()}
                  >
                    <View style='z-index: 9999;'>
                      {platformSet.platformName || ''}
                    </View>
                    <View style='z-index: 9999;' className='icon'>
                      <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                    </View>
                  </View>
                  }
                  {(multiSite == 0 && indexDiy.head_type && indexDiy.head_type.banner_search_type == 1) &&
                  <Navigator className='city' url='/other/select-city/select-city' hoverClass='none'>
                    <View
                      className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                      style={`z-index: 9999;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 10px;' : `top: ${headTop.top + headTop.statusBar + 4}px;position: fixed !important;`}`}
                    >
                      <View>
                        {this.props.location.area_name}
                      </View>
                      <View className='icon'>
                        <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                      </View>
                    </View>
                  </Navigator>
                  }
                  {headTop.top && !showLoading && (TARO_ENV !== 'h5' && TARO_ENV !== 'tt') &&
                  <View className={!video ? `search-bar ${TARO_ENV}` : `search-bar ${TARO_ENV} border1`}
                    style={`top: ${headTop.top + headTop.statusBar}px;`}
                  />}
                  <View className='banner_video'>{TARO_ENV !== 'h5' && bannerVideo && !showLoading &&
                  <Video
                    src={bannerVideo}
                    showFullscreenBtn={indexDiy.banner_video_full_screen == 1}
                    show-play-btn={false}
                    controls
                    autoplay
                    loop
                    initialTime={0}
                    id='video'
                    enableProgressGesture={false}
                    showCenterPlayBtn={false}
                    muted={indexDiy.banner_muted != 0}
                  >
                  </Video>
                  }
                    {TARO_ENV === 'h5' && bannerVideo && !showLoading &&
                    <video onTouchStart={() => this.openVideo()}
                      poster='https://img.yzcdn.cn/upload_files/2018/10/12/2f83313a404f40c381d1ba39ad0bd94e.jpg!large.webp'
                      id='video-h5' muted={indexDiy.banner_muted != 0} style='width: 100%' controls playsinline
                      webkit-playsinline x5-playsinline loop src={bannerVideo}
                    />}
                  </View>
                </Block>
              }
              {indexDiy && indexDiy.menus && indexDiy.menus.length > 0 && <View className='categorys'>
                <MainMenu data={indexDiy.menus} index={indexDiy.icon_row_num} />
              </View>}
              <View className='index-main-labels'>
                {indexDiy && indexDiy.labels && indexDiy.labels.length > 0 && <View className='labels'>
                  <MainLabel data={indexDiy.labels} cityLabelsLength={cityLabels.length} />
                </View>}
                {cityLabels.length > 0 && <CityLabels data={cityLabels} />}
              </View>
            </View>
            }
          </Block>
        </Skeleton>
        <View
          style={(indexDiy.head_type && indexDiy.head_type.type == 3) ? `background: linear-gradient(180deg, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color},${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, ${indexDiy.head_type && indexDiy.head_type.banner_ellipse_color}, #f3f3f3, #f3f3f3);` : ""}
        >
          {/* banner2 */}
          {(indexDiy.head_type && indexDiy.head_type.type == 2) &&
          <Skeleton loading={showLoading} className='paddingNone' title titleWidth='100%' rowHeight='258px'>
            <Block>
              <Block>
                {!video ?
                  <Block>
                    {banners.length > 0 ?
                      <View
                        className='swiper-diy'
                      >
                        {(multiSite == 1 && indexDiy.head_type) &&
                        <View
                          className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                          style={`${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 0;left: 0' : 'top:' + (headTop.top + headTop.statusBar + 4) + 'px;position: fixed !important;'}`}
                          onClick={() => this.showSite()}
                        >
                          <View>
                            {platformSet.platformName || ''}
                          </View>
                          <View className='icon'>
                            <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                          </View>
                        </View>
                        }
                        {(multiSite == 0 && indexDiy.head_type) &&
                        <Navigator className='city' url='/other/select-city/select-city' hoverClass='none'>
                          <View
                            className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                            style={`${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 0;left: 0' : 'top:' + (headTop.top + headTop.statusBar + 4) + 'px;position: fixed !important;'}`}
                          >
                            <View>
                              {this.props.location.area_name}
                            </View>
                            <View className='icon'>
                              <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                            </View>
                          </View>
                        </Navigator>
                        }
                        <View className='swiper-wrap'>
                          <View className='swiper-box'
                            style={`height: ${bannerHeight + (TARO_ENV === "h5" ? 'px' : 'rpx')};`}
                          >
                            <Swiper indicatorDots autoplay indicatorActiveColor={`${process.env.mainColor}`}
                              indicatorColor='rgba(255,255,255,0.68)' interval={5000} duration={1000}
                              className='swiper'
                            >
                              {banners.map((item, index) => <SwiperItem key={index}
                                onClick={this.menusClick.bind(this, item, index)}
                              >
                                <Image className='__hw-100'
                                  style='width:100%;height:100%;border-bottom-left-radius: 15px!important; border-bottom-right-radius: 15px!important;'
                                  src={item.img} mode='widthFix' lazyLoad
                                />
                              </SwiperItem>)}
                            </Swiper>
                          </View>
                        </View>
                      </View>
                      :
                      <Block>
                        {
                          (multiSite == 1) &&
                          <View
                            style={`${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 0;left: 0' : 'top:' + (headTop.top + headTop.statusBar + 4)}px;position: fixed !important;`}
                            className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                            onClick={() => this.showSite()}
                          >
                            <View>
                              {platformSet.platformName || ''}
                            </View>
                            <View className='icon'>
                              <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                            </View>
                          </View>
                        }
                        {(multiSite == 0) &&
                        <Navigator className='city' url='/other/select-city/select-city' hoverClass='none'>
                          <View
                            className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                            style={`${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 0;left: 0' : 'top:' + (headTop.top + headTop.statusBar + 4)}px;position: fixed !important;`}
                          >
                            <View>
                              {this.props.location.area_name}
                            </View>
                            <View className='icon'>
                              <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                            </View>
                          </View>
                        </Navigator>
                        }
                        <View className='head-bg-static' style={`height: ${headTop.top + headTop.statusBar + 45}px;`} />
                      </Block>
                    }
                  </Block>
                  :
                  <Block>
                    {multiSite == 1 &&
                    <View
                      className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                      style={`z-index: 9999;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'position: static !important;font-size: 16px !important; top: 10px;' : 'top:' + (headTop.top + headTop.statusBar + 4) + 'px;position: fixed !important;'}`}
                      onClick={() => this.showSite()}
                    >
                      <View>
                        {platformSet.platformName || ''}
                      </View>
                      <View className='icon'>
                        <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                      </View>
                    </View>
                    }
                    {multiSite == 0 &&
                    <Navigator className='city' url='/other/select-city/select-city' hoverClass='none'>
                      <View
                        className={`swiper-diy-site ${(TARO_ENV === 'h5' || TARO_ENV === 'tt') && 'position-single-top'}`}
                        style={`z-index: 9999;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; top: 10px;' : 'top:' + (headTop.top + headTop.statusBar + 4) + 'px;position: fixed !important;'}`}
                      >
                        <View>
                          {this.props.location.area_name}
                        </View>
                        <View className='icon'>
                          <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                        </View>
                      </View>
                    </Navigator>
                    }
                    <View className='banner_video'>{TARO_ENV !== 'h5' && bannerVideo && !showLoading &&
                    <Video
                      src={bannerVideo}
                      showFullscreenBtn={indexDiy.banner_video_full_screen == 1}
                      show-play-btn={false}
                      controls
                      autoplay
                      loop
                      initialTime={0}
                      id='video'
                      enableProgressGesture={false}
                      showCenterPlayBtn={false}
                      muted={indexDiy.banner_muted != 0}
                    >
                    </Video>
                    }
                      {TARO_ENV === 'h5' && bannerVideo && !showLoading &&
                      <video onTouchStart={() => this.openVideo()}
                        poster='https://img.yzcdn.cn/upload_files/2018/10/12/2f83313a404f40c381d1ba39ad0bd94e.jpg!large.webp'
                        id='video-h5' muted={indexDiy.banner_muted != 0} style='width: 100%' controls playsInline
                        webkit-playsinline x5-playsinline loop src={bannerVideo}
                      />}
                    </View>
                  </Block>
                }
              </Block>
              {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 0) &&
              <Navigator className='_search' url='/common/search/search' hoverClass='none'>
                <View
                  className='_search-box'
                  style='position: relative; top: 5px;margin: 0 10px;'
                >
                  <View className='icon'>
                    <AtIcon customStyle='font-size: 16px' value='search' size='16' />
                  </View>
                  <View>支持搜索关键词</View>
                </View>
              </Navigator>}
            </Block>
          </Skeleton>}
          {/* banner3, banner4 */}
          {(indexDiy.head_type && (indexDiy.head_type.type == 3 || indexDiy.head_type.type == 4)) &&
          <Skeleton loading={showLoading} className='paddingNone m-b-10' title
            titleWidth='100%' rowHeight='258px'
          >
            <Block>
              <View
                className='p-t-138'
                style={`${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'padding-top: 30px !important;' : ''} ${indexDiy.head_type && indexDiy.head_type.banner_search_type == 0 && (TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'padding-top: 0 !important;' : `height: ${TARO_ENV === 'weapp' ? (headTop.top + headTop.statusBar + 45) : ''}px;padding-top: 0 !important;`}`}
              >
                {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 1 && (TARO_ENV === 'h5' || TARO_ENV === 'tt') && multiSite == 1) &&
                <View
                  className='swiper-diy-site'
                  style={`z-index: 8888;${(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; position: static;justify-content: inherit;padding: 10px 0 10px 24px' : ''}`}
                  onClick={() => this.showSite()}
                >
                  <View style='z-index: 9999;'>
                    {platformSet.platformName || ''}
                  </View>
                  <View style='z-index: 9999;' className='icon'>
                    <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                  </View>
                </View>
                }
                {(multiSite == 0 && indexDiy.head_type && indexDiy.head_type.banner_search_type == 1) &&
                <Navigator className='city' url='/other/select-city/select-city' hoverClass='none'>
                  <View
                    className='swiper-diy-site'
                    style={(TARO_ENV === 'h5' || TARO_ENV === 'tt') ? 'font-size: 16px !important; position: static;justify-content: inherit;padding: 10px 0 10px 24px' : `position: fixed !important;z-index: 9999;top: ${headTop.top + headTop.statusBar}px`}
                  >
                    <View style='z-index: 9999;'>
                      {this.props.location.area_name}
                    </View>
                    <View style='z-index: 9999;' className='icon'>
                      <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                    </View>
                  </View>
                </Navigator>
                }
                {(TARO_ENV !== 'h5' && TARO_ENV !== 'tt') &&
                <View className='head-bg'
                  style={`line-height: initial !important;background: rgba(242,242,242,${opacityNum});z-index: 8888;position: fixed;font-weight: bold;height: ${headTop.top + headTop.statusBar + 45}px;`}
                >
                  {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 1 && multiSite == 1) &&
                  <View
                    className='swiper-diy-site'
                    style='font-size: 16px !important; top: 0 !important;'
                    onClick={() => this.showSite()}
                  >
                    <View style={`top: ${(headTop.top + headTop.statusBar + 4)}px;position: relative !important;`}>
                      {platformSet.platformName || ''}
                    </View>
                    <View className='icon'
                      style={`top: ${(headTop.top + headTop.statusBar + 4)}px;position: relative !important;`}
                    >
                      <AtIcon customStyle='font-size: 16px' value='chevron-down' size='16' />
                    </View>
                  </View>
                  }
                </View>}
              </View>
              {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 0 && multiSite == 1) && <View
                className={!video ? `search-bar ${TARO_ENV}` : `search-bar ${TARO_ENV} border1`}
                style={`top: ${headTop.top + headTop.statusBar}px;z-index: 9999;`}
              >
                <SiteLocation
                  platformSet={platformSet}
                  style='background: rgba(255, 255, 255, .72);'
                  onShow={() => this.showSite()}
                />
              </View>}
              {(indexDiy.head_type && indexDiy.head_type.banner_search_type == 0 && multiSite == 0) && <View
                className={!video ? `search-bar ${TARO_ENV}` : `search-bar ${TARO_ENV} border1`}
                style={`top: ${headTop.top + headTop.statusBar}px;z-index: 9999;`}
              >
                <CityLocation />
              </View>}
              {indexDiy.head_type.type == 4 && (video || banners.length > 0) && <View
                className={process.env.TARO_ENV === "weapp" ? "banner4-style" : "banner4-style-h5"}
                style={
                  `top: ${TARO_ENV === 'weapp' && (headTop.top + headTop.statusBar + 45)}px !important;background-color: ${indexDiy.head_type && indexDiy.head_type.banner_fillet_color}; height: ${!video && (bannerHeight + (process.env.TARO_ENV === "h5" ? 'px' : 'rpx'))};`
                }
              />}
              {!video ?
                <Block>
                  {banners.length > 0 &&
                  <View className='swiper-diy2'
                    style={`${process.env.TARO_ENV === "weapp" ? 'margin-top: 20rpx !important;' : ''}`}
                  >
                    <View className='swiper-wrap'>
                      <View className='swiper-box'
                        style={`height: ${bannerHeight + (process.env.TARO_ENV === "h5" ? 'px' : 'rpx')};`}
                      >
                        <Swiper indicatorDots autoplay={banners.length >= 2}
                          indicatorActiveColor={`${process.env.mainColor}`}
                          indicatorColor='rgba(255,255,255,0.68)' interval={5000} duration={1000}
                          className='swiper'
                        >
                          {banners.map((item, index) => <SwiperItem key={index}
                            onClick={this.menusClick.bind(this, item, index)}
                          >
                            <Image
                              className='__hw-100'
                              src={item.img}
                              mode='aspectFill' lazyLoad
                            />
                          </SwiperItem>)}
                        </Swiper>
                      </View>
                    </View>
                  </View>
                  }
                </Block>
                :
                <Block>
                  <View className='banner_video'>{TARO_ENV !== 'h5' && bannerVideo && !showLoading &&
                  <Video
                    src={bannerVideo}
                    showFullscreenBtn={indexDiy.banner_video_full_screen == 1}
                    show-play-btn={false}
                    controls
                    autoplay
                    loop
                    initialTime={0}
                    id='video'
                    enableProgressGesture={false}
                    showCenterPlayBtn={false}
                    muted={indexDiy.banner_muted != 0}
                  >
                  </Video>
                  }
                    {TARO_ENV === 'h5' && bannerVideo && !showLoading &&
                    <video onTouchStart={() => this.openVideo()}
                      poster='https://img.yzcdn.cn/upload_files/2018/10/12/2f83313a404f40c381d1ba39ad0bd94e.jpg!large.webp'
                      id='video-h5' muted={indexDiy.banner_muted != 0} style='width: 100%' controls playsInline
                      webkit-playsinline x5-playsinline loop src={bannerVideo}
                    />}
                  </View>
                </Block>
              }
            </Block>
          </Skeleton>}
          {/* 蝌蚪头部卡片 */}
          {(indexDiy.head_type && indexDiy.head_type.type >= 2) && <View>
            {indexDiy && indexDiy.menus && indexDiy.menus.length > 0 && <View className='categorys'>
              <MainMenu data={indexDiy.menus} index={indexDiy.icon_row_num} />
            </View>}
          </View>}
        </View>
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='150px'
        >
          <Block>
            {(indexDiy.head_type && indexDiy.head_type.type >= 2) &&
            <View className='index-main-labels'>
              {indexDiy && indexDiy.labels && indexDiy.labels.length > 0 &&
              <View className='labels' style='margin-top: 10px;'>
                <MainLabel data={indexDiy.labels} />
              </View>}
              {cityLabels.length > 0 && <CityLabels data={cityLabels} />}
            </View>
            }
          </Block>
        </Skeleton>
        {
          (process.env.P_ENV !== 'lx' || NOT_LX_H5) &&
          !showLoading && <FloatRedbag />
        }
        <Skeleton loading={showLoading}
          title
          titleWidth='100%' rowHeight='150px'
        >
          <Block>
            {TARO_ENV !== 'h5' && <Subscription data={openMp} />}
            {TARO_ENV === 'h5' && platform.subscription && platform.subscription.show_place !== '' && platform.subscription.show_place !== undefined && platform.subscription.show_place.indexOf("1") > -1 &&
            <Subscription data={platform.subscription} />}
            {indexDiy && indexDiy.module && indexDiy.module.length > 0 && indexDiy.module.map((item, index) => <View
              key={index}
            >
              {item.type === 'advert' && <View className='advert-box' onClick={() => gotoPage(item.moreUrl)}>
                <Image className='img' src={item.image} mode='widthFix' />
              </View>}
              {process.env.TARO_ENV !== 'tt' && platformSet && platformSet.is_open_united == 1 && item.type === 'lianlian' && <View>
                <LocalLife data={lianList.data} />
              </View>}
              {process.env.TARO_ENV !== 'tt' && platformSet && platformSet.is_open_aliyun == 1 && item.type === 'aliyun' &&
              <View>
                <LocalLifeAli data={aliList.data} isUser={isUser} />
              </View>
              }
              {item.type === 'limit1' && <View className='sale-module-1'>
                <IndexSaleLimit1 isUser={isUser} {...item} />
              </View>}
              {item.type === 'limit2' && <View className='sale-module-2'>
                <IndexSaleLimit2 isUser={isUser} {...item} />
              </View>}
              {item.type === 'limit3' && <View className='sale-module-3'>
                <IndexSaleLimit3 {...item} />
              </View>}
              {item.type === 'goods1' && <View className='most-module'>
                <IndexSaleMost {...item} />
              </View>}
              {item.type === 'goods2' && <View className='most-module'>
                <SwiperRecommend title={item.name} data={item.data} clickMore={() => {
                  gotoPage(item.moreUrl)
                }}
                />
              </View>}
              {item.type === 'goods3' && <View className='common-module'>
                <IndexSaleCommon {...item} isUser={isUser} />
              </View>}
              {item.type === 'movie' && TARO_ENV !== 'tt' && <View className='common-module'>
                <SwiperMovie data={item.data} title={item.name} clickMore={() => {
                  gotoPage(item.moreUrl)
                }}
                />
              </View>}
              {item.type === 'video' && <View id='videoBox'>
                <IndexVideo autoplay={autoPlay} onPrepPlay={this.onPlay.bind(this)} videoId={item.qq_video_id}
                  playerId={item.qq_video_id}
                  playSta={playSta}
                />
              </View>}
              { /* 今日上新 */}
              {item.type === 'joshinToday' && <View className='index-main-labels'>
                <ShangxinToday isUser={isUser} data={item} />
              </View>}
              { /* 限时秒杀 */}
              {item.type === 'limitedTimeSpike' && <View className='index-main-labels'>
                <Seckill isUser={isUser} data={item} />
              </View>}
              { /* 秒杀活动 */}
              {item.type === 'limitedSeckill' && <View className='index-main-labels seckill-main-box'>
                <SeckillActive isUser={isUser} data={item} />
              </View>}
              { /* 爆款推荐 */}
              {item.type === 'PopularRecommendation' && <View className='index-main-labels'>
                <Recommendation isUser={isUser} data={item} />
              </View>}
            </View>)}
          </Block>
        </Skeleton>
        {indexDiy.guessLike >= 0 && indexGoods && indexGoods.length > 0 && <View className='goods-box'>
          <View className='head'>
            <Skeleton loading={showLoading} title>
              <View className='title'
                style={`margin-bottom: -${indexDiy.guessLike === 0 ? '15' : '0'}px`}
              >{indexDiy.guessLikeName || '猜你喜欢'}</View>
            </Skeleton>
          </View>
          <Skeleton loading={showLoading}
            title
            titleWidth='100%' rowHeight='150px'
          >
            <View className='goods'>
              {indexDiy.guessLike === 1 && <SmallGoodsBox data={indexGoods} />}
              {indexDiy.guessLike === 0 && <BigGoodsBox isUser={isUser} data={indexGoods} />}
            </View>
          </Skeleton>
        </View>}
        { /* 区域品类 */}
        <View id='scroll'>
          {indexDiy.regionFlag == true && <View className='index-main-labels sticky-t-0 m-auto min-height-800'>
            <RegionalCategory isUser={isUser} systemInfo={systemInfo} loadMoreStatus={loadMoreStatus} data={{
              goodsData: indexGoods,
              data: indexDiy.regionalCategoryModel,
              isShow
            }} onChange={this.ReachBottom.bind(this)}
              onScroll={this.scroll.bind(this)}
            />
          </View>}
        </View>
        {!showLoading && loadMoreStatus === 'noMore' && <Advertisement />}
        <SupportBar />
        {(TARO_ENV !== 'h5' || ((mpUserInfo && mpUserInfo.subscribe == 1) || process.env.P_ENV === 'lx')) && custom && custom.pop_type === 2 && curtainShow &&
        <Curtain onClose={this.closeCurtain.bind(this)} bgImg={custom.pop_img} goodImg={custom.pop_img}
          url={custom.pop_url}
        />}
        {(TARO_ENV !== 'h5' || ((mpUserInfo && mpUserInfo.subscribe == 1) || process.env.P_ENV === 'lx')) && custom && custom.pop_type === 1 && curtainShow &&
        <Curtain onClose={this.closeCurtain.bind(this)}
          bgImg='https://resource.ivcheng.com/resources/system/img/tanchuang.png'
          goodImg={custom.pgimg}
          goodName={custom.pop_goods.name}
          goodPrice={custom.pop_goods.price}
          url={custom.url}
        />}
        {(TARO_ENV !== 'h5' || ((mpUserInfo && mpUserInfo.subscribe == 1) || process.env.P_ENV === 'lx')) && custom && custom.pop_type === 0 && curtainShow &&
        <Curtain onClose={this.closeCurtain.bind(this)} bgImg={custom.pop_img} goodImg={custom.pop_img}
          url={custom.url}
        />}
        <AtDrawer
          show={show}
          mask
          onClose={() => this.showSite(false)}
        >
          {
            !showLoading && siteList.map((item, index) =>
              <View
                key={index}
                style={`margin-top: ${(index === 0) && (menuInfo.top - 10)}px`}
                className={`drawer-item ${item.label === (platformSet.platformName || '') && 'drawer-item-active'}`}
                onClick={() => this.setSKey(item.uuid)}
              >
                {item.label}
              </View>
            )
          }
        </AtDrawer>
        {linkUri && <Share displayPoster={!!platformSet && !!platformSet.share_poster} isUser={isUser} linkUri={linkUri} page='index' onHandlerShowDialog={() => {
          this.onHandlerShowDialog()
        }}
        />}
      </View>
    )
  }
}

export default Index
